/*
 * @Author: xiaosihan 
 * @Date: 2023-08-21 22:46:28 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2023-09-06 11:13:50
 */




import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./ToolFullScreen.module.less";
import undoSVG from "./undo.svg?raw";
import clsx from "clsx";
import { Tooltip } from "antd";
import designDataHistory from "@/editorComponent/designDataHistory";
import { FullscreenExitOutlined, FullscreenOutlined } from "@ant-design/icons";

interface Iprops {
}


// 后退
export default function ToolFullScreen() {

    const dom = useRef<HTMLDivElement | null>(null);
    const [data, setData] = useState({});
    const [disable, setDisable] = useState(true);
    const [undoNum, setUndoNum] = useState(0);
    const [isFullScreen, setIsFullScreen] = useState(true);

    useEffect(() => {

    }, []);


    // 全屏
    const handleRequestFullScreen = (domElement: any) => {
        if (domElement.requestFullscreen) {
            domElement.requestFullscreen();
        } else if (domElement.webkitRequestFullScreen) {
            domElement.webkitRequestFullScreen();
        } else if (domElement.mozRequestFullScreen) {
            domElement.mozRequestFullScreen();
        } else {
            domElement.msRequestFullscreen();
        }
    };
    // 退出全屏
    const handleExitFullscreen = () => {
        const document: any = window.document;
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExiFullscreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
    };

    const handleFullScreen = () => {
        if (isFullScreen) {
            // const peripheral = this.$refs["fixed_peripheral"];

            const peripheral = document.getElementsByTagName('body')[0]
            if (peripheral) {
                // document.getElementsByClassName("fixed_peripheral")[0].classList.add("fullScreenLocation")
                handleRequestFullScreen(peripheral);
            }
        } else {
            // document.getElementsByClassName("fixed_peripheral")[0].classList.remove("fullScreenLocation")
            handleExitFullscreen();
        }
        setIsFullScreen(!isFullScreen);
    };

    useEffect(() => autorun(() => {
        const { undoNum } = designDataHistory.store;
        setUndoNum(undoNum);
    }), []);

    return (
        <Tooltip
            title="全屏(F11)"
            placement="bottom"
            mouseLeaveDelay={0}
            mouseEnterDelay={0.5}
        >
            <span
                className={clsx(styles.toolUndo, (undoNum === 0) && styles.disable)}
                onClick={(e) => {
                    handleFullScreen();
                }}
                onMouseUp={e=>{
                    e.stopPropagation();
                    e.preventDefault();
                }}
            >
               {
                isFullScreen ? <FullscreenOutlined  style={{ color: 'rgb(44, 44, 44)'}} disabled={undoNum === 0}/> : 
                <FullscreenExitOutlined   style={{ color: 'rgb(44, 44, 44)'}} disabled={undoNum === 0}/>
               } 
            </span>
            {/* {undoNum} */}
        </Tooltip>
    );

}